<template>
    <div>
        <!--会员管理-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/customer' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="mumberFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="mumberFormData.username" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="mumberFormData.contactName" placeholder="请输入客户名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary"  @click="initClientTable">查询</el-button>
                    <el-button type="primary" @click="tianjia">添加</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="username"
                            label="账号"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="name"
                            label="昵称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="contactName"
                            label="客户名称"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="headPic"
                            label="头像"
                            align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.headPic" width="100" height="80" align="center">
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="sex"
                            label="性别"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="idType"
                            label="证件类型"
                            align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.idType == 1">身份证</span>
                            <span v-if="scope.row.idType == 2">护照</span>
                            <span v-if="scope.row.idType == 3">军官证</span>
                            <span v-if="scope.row.idType == 4">台胞证</span>
                            <span v-if="scope.row.idType == 5">港澳台来往内地通行证</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="contactPhone"
                            label="联系电话"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            align="center">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949"
                                    @change="switchStatus(scope.row.id,$event)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="accountBalance"
                            label="账户余额"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="integration"
                            label="积分"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="growth"
                            label="成长值"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="historyIntegration"
                            label="历史积分数量"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            label="会员级别"
                            prop="level.levname"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="email"
                            label="邮箱"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="pathFront"
                            label="证件照正面"
                            align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.pathFront" width="100" height="80" align="center">
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="pathReverse"
                            label="证件照反面"
                            align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.pathReverse" width="100" height="80" align="center">
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="updateClient(scope.row.id,scope.row.status)"></el-button>
                            <br>
                            <el-button type="danger" icon="el-icon-delete" circle @click="deleteClient(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
        </el-card>
        <!--修改的对话框-->

        <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="30%"
                @close="qx"
        >
            <!--model:表单数据-->
            <el-form  label-width="80px" :label-position="labelPosition" :model="clientForm" ref="clientForm" :rules="ruleForm">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="clientForm.username" placeholder="请输入账号"></el-input>
                </el-form-item>

                <el-form-item label="昵称" prop="name">
                    <el-input v-model="clientForm.name" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="客户名称" prop="contactName">
                <el-input v-model="clientForm.contactName" placeholder="请输入客户名称"></el-input>
                </el-form-item>

                <el-form-item label="头像" prop="headPic">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:80/client/cli/upPicture"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            :headers="{'token':token}">

                        <img v-if="clientForm.headPic" :src="clientForm.headPic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                    <el-select v-model="clientForm.sex" placeholder="请输入性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件类型" prop="idType">
                    <el-select v-model="clientForm.idType" placeholder="请输入证件类型">
                        <el-option label="身份证" value="1"></el-option>
                        <el-option label="护照" value="2"></el-option>
                        <el-option label="军官证" value="3"></el-option>
                        <el-option label="台胞证" value="4"></el-option>
                        <el-option label="港澳台来往内地通行证" value="5"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="联系电话" prop="contactPhone">
                    <el-input v-model="clientForm.contactPhone" placeholder="请输入联系电话"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-select v-model="clientForm.status" placeholder="请输入状态">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="账户余额" prop="accountBalance">
                    <el-input v-model="clientForm.accountBalance" placeholder="请输入账户余额"></el-input>
                </el-form-item>
                <el-form-item label="积分" prop="integration">
                    <el-input v-model="clientForm.integration" placeholder="请输入积分"></el-input>
                </el-form-item>
                <el-form-item label="成长值" prop="growth">
                    <el-input v-model="clientForm.growth" placeholder="请输入成长值"></el-input>
                </el-form-item>

                <el-form-item label="历史积分数量" prop="historyIntegration">
                    <el-input v-model="clientForm.historyIntegration" placeholder="请输入历史积分数量"></el-input>
                </el-form-item>

                <el-form-item label="会员等级" prop="memberLevelId">
                    <el-select v-model="clientForm.memberLevelId" placeholder="请选择会员级别">
                        <el-option v-for="item in levelOptions" :key="item.id" :label="item.levname" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="地址" prop="address">
                    <el-input v-model="clientForm.address" placeholder="请输入地址"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="clientForm.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="证件照正面" prop="pathFront">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:80/client/cli/upPicture"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess1"
                            :before-upload="beforeAvatarUpload1"
                            :headers="{'token':token}">
                        <img v-if="clientForm.pathFront" :src="clientForm.pathFront" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="证件照反面" prop="pathReverse">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:80/client/cli/upPicture"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess2"
                            :before-upload="beforeAvatarUpload2"
                            :headers="{'token':token}">
                        <img v-if="clientForm.pathReverse" :src="clientForm.pathReverse" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
                    </el-upload>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qx">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Mumber",
        data(){
            let varUserame = (rule, value, callback) => {
                //查询用户名是否重复
                this.$http.post(`/client/cli/selUsername`,this.clientForm).then(function (res) {
                    if (res && res.data.result.code == '0') {

                        callback()
                    } else if (res && res.data.result.code == '1') {
                        callback(new Error('账号已存在'))
                    }

                })
            }
            let varEmail = (rule, value, callback) => {
                //查询邮箱名是否重复
                this.$http.post(`/client/cli/selEmail`,this.clientForm).then(function (res) {
                    if (res && res.data.result.code == '0') {

                        callback()
                    } else if (res && res.data.result.code == '1') {
                        callback(new Error('邮箱已存在'))
                    }

                })
            }
            let varPhome = (rule, value, callback) => {
                //查号码名是否重复
                this.$http.post(`/client/cli/selPhone`,this.clientForm).then(function (res) {
                    if (res && res.data.result.code == '0') {

                        callback()
                    } else if (res && res.data.result.code == '1') {
                        callback(new Error('号码已存在'))
                    }

                })
            }
            let varCname = (rule, value, callback) => {
                //查号码名是否重复
                this.$http.post(`/client/cli/selCname`,this.clientForm).then(function (res) {
                    if (res && res.data.result.code == '0') {

                        callback()
                    } else if (res && res.data.result.code == '1') {
                        callback(new Error('客户名称已存在'))
                    }

                })
            }

            return{
                //获取令牌
                token:"",
                //修改框内字段名左对齐
                labelPosition: 'left',
                //条件搜索对象
                mumberFormData:{},
                //表格数据
                tableData:[],
                //添加修改弹出框显示
                editDialogVisible:false,
                //添加用户表单信息
                clientForm:{
                    headPic:"",
                    pathFront:"",
                    pathReverse:"",
                },
                //当前的显示的页码
                currentPage:1,
                //每页显示的条数
                pageSize:5,
                //总条数
                total:0,
                //下拉
                levelOptions:{},
                //表单校验数据:
                ruleForm:{
                    memberLevelId:[
                        { required: true, message: '请输入客户等级', trigger: 'blur' },
                    ],
                    username:[
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' },
                        { validator: varUserame, trigger: 'blur' }
                    ],
                    name:[
                        { required: true, message: '请输入客户名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: "请输入邮箱", trigger: "blur" },
                        { validator: varEmail, trigger: 'blur' },
                        // { type:"email",message: "请输入邮箱", trigger: "blur" },
                        {
                            validator: function(rule, value, callback) {
                                if (/^\w{3,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(value) == false) {
                                    callback(new Error("邮箱格式错误"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    contactPhone: [
                        { required: true, message: "请输入手机号码", trigger: "blur" },
                        { validator: varPhome, trigger: 'blur' },
                        {
                            validator: function(rule, value, callback) {
                                if (/^1[34578]\d{9}$/.test(value) == false) {
                                    callback(new Error("手机号格式错误"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    contactName:[
                        { required: true, message: '请输入客户名称', trigger: 'blur' },
                        { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' },
                        { validator: varCname, trigger: 'blur' }
                    ],
                },
            }
        },
        created() {
            //获取客户的信息
            this.initClientTable();
            this.xiala();
            this.gettoken();
        },
        methods:{
            //修改启用禁用状态
            switchStatus(id,status){
                this.$http.put(`/client/cli/change/${id}/${status}`).then(function (re) {

                })
            },
            //获取令牌的方法
            gettoken(){
                this.token = sessionStorage.getItem("token");
            },
            //上传路径
            handleAvatarSuccess(res) {
                console.log(res)
                this.clientForm.headPic = res;
                console.log(this.clientForm.headPic)
            },
            //图片上传之前确认规格的方法
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg'||'image/jpg'||'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //上传路径
            handleAvatarSuccess1(res) {
                this.clientForm.pathFront = res;
            },
            //图片上传之前确认规格的方法
            beforeAvatarUpload1(file) {
                const isJPG = file.type === 'image/jpeg'||'image/jpg'||'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //上传路径
            handleAvatarSuccess2(res) {
                this.clientForm.pathReverse = res;
            },
            //图片上传之前确认规格的方法
            beforeAvatarUpload2(file) {
                const isJPG = file.type === 'image/jpeg'||'image/jpg'||'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //下拉等级
            xiala(){
                var that=this;
                this.$http.post(`/client/lev/findMumber`).then(function(resp){
                    that.levelOptions=resp.data.result.level;
                });
            },

            //分页查询
            initClientTable(){
                //get方式不支持json数据
                var that=this;
                this.$http.post(`/client/cli/initClientTable/${this.currentPage}/${this.pageSize}`,this.mumberFormData).then(function(resp){
                    console.log(resp);
                    that.tableData=resp.data.result.records;
                    that.total=resp.data.result.total;
                });
            },
            //添加
            tianjia(){
                this.editDialogVisible=true;
               // this.clientForm={};
            },
            qx(){
               this.$refs.clientForm.resetFields();
               this.editDialogVisible=false;
            },
            //删除
            deleteClient(id){
                var that=this;

                this.$http.delete(`/client/cli/deleteClient/${id}`).then(function (resp) {
                    that.$message.success(resp.data.message);
                    that.initClientTable();
                    // location.reload();
                })
                this.currentPage=1;
            },
            //修改的回显
            updateClient(id,status){
                console.log(status)
                    if (status){
                        this.editDialogVisible=true;
                        var that=this;
                        this.$http.get(`/client/cli/findById/${id}`).then(function(resp){
                            that.clientForm=resp.data.result.client;
                        })
                    }else {
                        this.$message("该用户已被禁用")
                    }
            },

            //提交
            submit(){
                var that=this;
                this.$refs.clientForm.validate((valid)=>{
                    if(valid) {//valid表示校验通过
                        //进行id判断,如果id不为空则回显数据,走修改,如果id为空,则走添加
                        //this.clientForm.headPic=this.headPic;
                        if(this.clientForm.id!=null){
                            //JSON对象
                            //修改提交
                            this.$http.put(`/client/cli/updateClient`,this.clientForm).then(function(resp){
                                console.log(resp)
                                if(resp.data.success==true){
                                    that.editDialogVisible=false;
                                    that.$message.success(resp.data.message);
                                    that.initClientTable();
                                }
                            })
                        }else{
                            //添加提交
                            this.$http.post(`/client/cli/insertClient`,this.clientForm).then(function (resp) {
                                if(resp.data.success==true){
                                    that.editDialogVisible=false;
                                    that.$message.success(resp.data.message);
                                    that.initClientTable();
                                }
                            })
                        }
                       // that.clientForm={};
                    }
                })

            },
            //当改变没有显示的条数时触发该方法
            handleSizeChange(v){
                this.pageSize=v;
                this.initClientTable();
            },
            //切换页码时触发该方法
            handleCurrentChange(v){
                this.currentPage=v;
                this.initClientTable();
            },

        },
    }
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>